<template>
  <div class="payment">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #center> 确认付款 </template>
    </my-header>
    <div class="content">
      <ul>
        <li>
          <van-icon name="gold-coin-o" style="color: #f8662f" />
          <section>
            <p>商品总额：￥{{ order.amount }}</p>
            <p class="foot">订单号：{{ order.orderNumber }}</p>
          </section>
        </li>
        <li>
          <van-icon name="location-o" style="color: #5a9fec" />
          <section>
            <p>{{ address.linkMan }} {{ address.mobile }}</p>
            <p class="foot">{{ address.address }}</p>
          </section>
        </li>
      </ul>
    </div>
    <van-button block type="danger" @click="pay"
      >微信支付 ￥{{ order.amount }}</van-button
    >
    <van-popup v-model:show="show" round>
      <div class="code">
        <!-- p 存放二维码 -->
        <p ref="dom"></p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import myHeader from "../../components/myHeader.vue";
import { getAddrerss, createOrder } from "../../api/secendPage/index";
import { useStore } from "vuex";
import QRCode from "qrcodejs2";

export default {
  components: { myHeader },
  setup() {
    const { state, commit } = useStore();
    let token = localStorage.getItem("token");
    const data = reactive({
      address: {}, // 收货地址
      order: {}, // 订单信息
      orderList: computed(() => state.cartList.filter((item) => item.order)),
      show: false,
    });
    const dom = ref(null);
    getAddrerss({ token: token }).then((res) => {
      data.address = res.data;
    });
    let arr = []; // 要提交的数据
    data.orderList.forEach((item) => {
      arr.push({
        goodsId: item.id,
        logisticsType: 0,
        number: item.buyNum,
        propertyChildIds: item.checkIds.join(","),
        checked: true,
      });
    });
    // console.log(arr);
    createOrder({ token: token, goodsJsonStr: JSON.stringify(arr) }).then(
      (res) => {
        data.order = res.data;
      }
    );

    const pay = () => {
      // 支付函数
      //   commit("clearCart");
      data.show = true;

      // 第一个参数是dom节点（存放二维码的容器）
      setTimeout(() => {
        new QRCode(dom.value, {
          text: "http://www.usian.cn/", // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      }, 50);
    };
    return {
      ...toRefs(data),
      pay,
      dom,
    };
  },
};
</script>
<style lang="scss" scoped>
.payment {
  height: 100%;
  .content {
    height: calc(100% - 94px);
    overflow: auto;
  }
  li {
    display: flex;
    align-items: center;
    padding: 15px;
    border-top: 1px solid #ccc;
    section {
      flex: 1;
      font-size: 14px;
      margin-left: 20px;
    }
    .foot {
      font-size: 12px;
      color: #999;
      margin-top: 20px;
    }
  }
}
.code {
  background: #fff;
  padding: 15px;
}
</style>